<template>

  <div class="container-fluid">
    <TopBar></TopBar>

    <div class="box">
      <br>
      <br>

      <div class="box-1" >
        <p>{{ $t('homePage.welecome') }} </p> 
        <p> {{ $t('homePage.runDays') }}  <span>{{ tweened.runDays.toFixed(0) }}</span> days</p>
        <p> {{ $t('homePage.articles') }} <span>{{ tweened.articles_num.toFixed(0) }}+</span></p>
        <p> {{ $t('homePage.join1') }} <span>{{ tweened.users_num.toFixed(0) }}+</span> {{ $t('homePage.join2') }}</p>
        <br>
        <div style="width: 90%;margin:auto; height: 2px; background-color: rgb(255, 255, 255);"></div>
        <br>
      </div>

      <div  class="img-main-box">
      <div class="box-left">
        <div class="img-box">
          <img width="400px"  src="../assets/homeimg/3.png" />
        </div>
        <div class="font-box">
          <p><span>美</span>可以被发现，亦可被创造</p>
          <p>Truth needs no colour; beauty，no pencil.</p>
        </div>
      </div>
      <div class="box-right">
        <div class="font-box">
          <p><span>稳</span>是可靠，是高效，是容错性好，是可扩展强

          </p>
          <p> In tranquil stillness, roots firmly entwined,
            A steadfast tree, against the test of time.</p>
        </div>
        <div class="img-box">
          <img width="400px" src="../assets/homeimg/4.png" />
        </div>
      </div>
      <div class="box-left">
        <div class="img-box">
          <img width="400px" src="../assets/homeimg/5.png" />
        </div>
        <div class="font-box">
          <p><span>精</span>是细致，是准确，是美丽

          </p>
          <p> A delicate touch, intricate and fine,
            Like a master's brush, strokes intertwine.</p>
        </div>
      </div>
      <div class="box-right">
        <div class="font-box">
          <p><span>人</span>是强大的，亦是脆弱的，心理是可以被控制的

          </p>
          <p>In the realm of minds, a subtle dance is spun,
            Where thoughts entwined and control is won.</p>
        </div>
        <div class="img-box">
          <img width="400px"  src="../assets/homeimg/1.png" />
        </div>
      </div>
      <div class="box-left">
        <div class="img-box">
          <img width="400px" src="../assets/homeimg/2.png" />
        </div>
        <div class="font-box">
          <p><span>T</span>ODO LIST

          </p>
          <p>Within life's vast and wondrous sphere,
            Our purpose beckons, crystal clear.
            To love, to learn, to persevere,
            Embrace the journey, hold it dear.</p>
        </div>
      </div>
    </div>


    </div>
      <!-- 大图 -->
      <div class="bottom-img">
        <br>
        <br>
        <br>
        <br>
        <p style="width: 50%;margin:auto;line-height: 2.5em;font-size: larger;">{{ $t('homePage.lifeMotto') }}</p>

        
      </div>
      <br>
    <BottomBar></BottomBar>
  </div>

</template>
<script setup lang="ts">
import { ref, reactive, watch, onMounted  } from 'vue'
import {ArticleStore} from '../store/articelStore/index'
import {UserStore} from '../store/userStore/index'
// 引入动画插件
import gsap from 'gsap'
//数字动画
const userStore = UserStore();
const articelStore = ArticleStore();
let runDays = ref(0)
let users_num = ref(0)
let articles_num = ref(0)
const tweened = reactive({
  runDays: 10,
  users_num: 0,
  articles_num: 0
})
function animateProperty(property:any, value:any) {
  watch(value, (n) => {
    gsap.to(tweened, { duration: 0.7, [property]: Number(n) || 0 })
  })
}
animateProperty('runDays', runDays)
animateProperty('users_num', users_num)
animateProperty('articles_num', articles_num)

//改变数字
runDays.value = calculateRemainingDays()*(-1);


function calculateRemainingDays() {
  const currentDate = new Date(); // 当前时间
  const targetDate = new Date('2023-06-01'); // 目标日期，注意日期格式
  const timeDiff = targetDate.getTime() - currentDate.getTime(); // 两个日期的毫秒差值
  const remainingDays = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)); // 将毫秒差值转换为天数并向上取整
  return remainingDays;
}

function getData(){
    userStore.getUserCounts();
    articelStore.getCounts();
  articles_num.value = articelStore.articleCounts
    users_num.value = userStore.counts
 
}
getData();
onMounted(() => {
//图片动画
gsap.from(".box-left", {opacity: 0.5, x: -100, duration: 7});
gsap.from(".box-right", {opacity: 0.5, x: 100, duration: 7});
})


</script>
<style lang="scss" scoped>

@media screen and (max-width: $passlink-media-max-width-5) {
  .container-fluid{
    height: 100%;
  }

.bottom-img{ // 在宽度大于断点时隐藏
 display: none;
  }
.img-box{
  display: none;
}
.img-main-box{
  display: none;
}
  
}

.container-fluid {
  background-color: $passlink-bg-color;
  width:100%;

  .box {
    width: 100%;
    background-color: $passlink-bg-color;
    height: auto;
    margin: auto;

    .box-1 {
      font-size: $passlink-font-size32;
      font-weight: normal;
      text-align: center;

      p {
        color: $passlink-font-color-white;

        span {
          color: $passlink-font-color-yellow;
          font-weight: bold;
        }
      }

    }

    .box-left {
      display: flex;
      width: $passlink-center-width;
      padding: 20px;
      margin:auto;
      .img-box {
        width: 50vw;
        height: 400px;
      }

      .font-box {
        width: 50vw;
        height: 400px;
        margin: auto;
        color: $passlink-font-color-white;
        text-align: center;

        p {
          font-size: $passlink-font-size18;
          font-weight: lighter;

          span {
            font-weight: bold;
            font-size: $passlink-font-size84;
          }
        }
      }
    }

    .box-right {
      display: flex;
      width: $passlink-center-width;
      padding: 20px;
      margin:auto;
      .img-box {
        width: 0.5* $passlink-center-width;
        height: 400px;
      }

      .font-box {
        width: 50vw;
        height: 400px;
        margin: auto;
        color: $passlink-font-color-white;
        text-align: center;

        p {
          font-size: $passlink-font-size18;
          font-weight: lighter;

          span {
            font-weight: bold;
            font-size: $passlink-font-size84;
          }
        }
      }
    }


  }
  .bottom-img {
    height: 1200px;
    background-image: url('../assets/homeimg/6.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: auto;
    text-align: center;
    padding: 50px;

    p {
      color: $passlink-font-color-white;
      font-size: $passlink-font-size16;
      font-weight: lighter;
    }

  }
}</style>
